<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>聊天室 - editor:yinq</title>
		<link rel="shortcut icon" href="favicon.png">
		<link rel="icon" href="favicon.png" type="image/x-icon">
		<link type="text/css" rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>

	<body>
		<div class="chatbox" style="width: 1250px; height: 520px;">
			<div class="chat_top fn-clear">
				<div class="logo"><img src="images/logo.png" width="190" height="60" alt="" /></div>
				<div class="uinfo fn-clear">
					<div class="uface"><img src="images/my_head.jpg" width="40" height="40" alt="" /></div>
					<div class="uname">
						我<i class="fontico down"></i>
						<ul class="managerbox">
							<li>
								<a href="#"><i class="fontico lock"></i>修改密码</a>
							</li>
							<li>
								<a href="#"><i class="fontico logout"></i>退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="chat_message fn-clear">
				<div class="chat_left" style="height: 450px;">
					<div class="message_box" id="message_box">
						<div class="msg_item fn-clear">
							<div class="uface"><img src="images/bigHero.jpg" width="40" height="40" alt="" /></div>
							<div class="item_right">
								<div class="msg">hello ! 我是M.A.I , 请多多指教~</div>
								<div class="name_time">MAI · 刚刚</div>
							</div>
						</div>
					</div>
					<div class="write_box" style="height: 180px;">
						<textarea id="message" name="message" class="write_area" placeholder="说点啥吧..." style="height: 80px;"></textarea>
						<input type="hidden" name="fromname" id="fromname" value="我" />
						<input type="hidden" name="to_uid" id="to_uid" value="0">
						<div class="facebox fn-clear">
							<div class="expression"></div>
							<div class="chat_type" id="chat_type">群聊</div>
							<button name="" class="sub_but">提 交</button>
						</div>
					</div>
				</div>
				<div class="chat_right">
					<ul class="user_list" title="双击用户私聊">
						<li class="fn-clear selected"><em>所有用户</em></li>
						<li class="fn-clear" data-id="1"><span><img src="images/my_head.jpg" width="30" height="30"  alt=""/></span><em>我</em><small class="online" title="在线"></small></li>
						<li class="fn-clear" data-id="2"><span><img src="images/bigHero.jpg" width="30" height="30"  alt=""/></span><em>MAI</em><small class="online" title="在线"></small></li>
					</ul>
				</div>
			</div>

		</div>

		<script type="text/javascript">
			$(document).ready(function(e) {
				$('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
				$('.uname').hover(
					function() {
						$('.managerbox').stop(true, true).slideDown(100);
					},
					function() {
						$('.managerbox').stop(true, true).slideUp(100);
					}
				);

				var fromname = $('#fromname').val();
				var to_uid = 0; // 默认为0,表示发送给所有用户
				var to_uname = '';
				$('.user_list > li').dblclick(function() {
					to_uname = $(this).find('em').text();
					to_uid = $(this).attr('data-id');
					if(to_uname == fromname) {
						alert('您不能和自己聊天!');
						return false;
					}
					if(to_uname == '所有用户') {
						$("#toname").val('');
						$('#chat_type').text('群聊');
					} else {
						$("#toname").val(to_uid);
						$('#chat_type').text('您正和 ' + to_uname + ' 聊天');
					}
					$(this).addClass('selected').siblings().removeClass('selected');
					$('#message').focus().attr("placeholder", "您对" + to_uname + "说：");
				});

				$('.sub_but').click(function(event) {
					sendMessage(event, fromname, to_uid, to_uname);
				});

				/*按下按钮或键盘按键*/
				$("#message").keydown(function(event) {
					var e = window.event || event;
					var k = e.keyCode || e.which || e.charCode;
					//按下ctrl+enter发送消息
					if((event.ctrlKey && (k == 13 || k == 10))) {
						sendMessage(event, fromname, to_uid, to_uname);
					}
				});
			});

			var addAnswerTitle;

			function sendMessage(event, from_name, to_uid, to_uname) {
				var msg = $("#message").val();
				if(to_uname != '') {
					msg = '您对 ' + to_uname + ' 说： ' + msg;
				}
				var htmlData = '<div class="msg_item fn-clear">' +
					'   <div class="uface"><img src="images/my_head.jpg" width="40" height="40"  alt=""/></div>' +
					'   <div class="item_right">' +
					'     <div class="msg own">' + msg + '</div>' +
					'     <div class="name_time">' + from_name + ' · 刚刚</div>' +
					'   </div>' +
					'</div>';
				$("#message_box").append(htmlData);
				$('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
				$("#message").val('');

				$.post("chat.action", {
					"ask": msg
				}, function(data) {
					if(data.flag == 1) {
						addAnswerTitle = data.msg;
						$("#ask_text").val(msg);
						$("#answerBut").click();
					} else {
						//MAI 回复消息
						recMessage(data.msg, "MAI");

					}

				}, "json");
			}

			function recMessage(msg, from_name) {
				var htmlData = '<div class="msg_item fn-clear">' +
					'   <div class="uface"><img src="images/bigHero.jpg" width="40" height="40"  alt=""/></div>' +
					'   <div class="item_right">' +
					'     <div class="msg own">' + msg + '</div>' +
					'     <div class="name_time">' + from_name + ' · 刚刚</div>' +
					'   </div>' +
					'</div>';
				$("#message_box").append(htmlData);
				$('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
				$("#message").val('');
			}

			$('#exampleModal').on('show.bs.modal', function(event) {
				var modal = $(this)
				modal.find('.modal-title').text('New message to ' + recipient)
				modal.find('.modal-body input').val(recipient)
			})
		</script>

		<div>
			<button id="answerBut" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">教教MAI</button>

			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="exampleModalLabel">教教MAI</h4>
						</div>
						<div class="modal-body">
							<form>
								<div class="form-group">
									<label for="recipient-name" class="control-label">对MAI说:</label>
									<input type="text" class="form-control" id="ask_text" name="ask">
								</div>
								<div class="form-group">
									<label for="message-text" class="control-label">MAI回答:</label>
									<textarea class="form-control" id="answer_text" name="answer"></textarea>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button id="closeBut" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button id="saveAnswerBut" type="button" class="btn btn-primary">保存</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			$(function() {
				$("#saveAnswerBut").click(function() {
					var ask = $("#ask_text").val();
					var answer = $("#answer_text").val();
					//					alert(ask)
					//					alert(answer)
					$.post("saveDialog.action", {
						"ask": ask,
						"answer": answer
					}, function(data) {
						$("#ask_text").val(" ");
						$("#answer_text").val(" ");
						$("#closeBut").click();
						//MAI 回复消息
						recMessage(data.msg, "MAI");
					}, "json");
				});
			});
		</script>

	</body>

</html>